<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:c="http://java.sun.com/jstl/core"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:rich="http://richfaces.org/rich"
              xmlns:a4j="http://richfaces.org/a4j"
              xmlns:common="http://www.contact.common.com/contacts/ui">

    <!--@elvariable id="value" type="java.lang.String"-->
    <!--@elvariable id="label" type="java.lang.String"-->
    <!--@elvariable id="reRender" type="java.lang.String"-->

    <f:subview id="searchTable">
        <style type="text/css">
            .searchPic {
                width: 20px;
                height: 20px;
            }

            .searchText {
                width: 100%;
                padding-right: 4px;
            }
            .searchPadding{
                padding-left:2px;
                padding-bottom:2px;
                padding-top:2px;
                padding-right:0;
            }
        </style>
        <!--border: 1px solid #BDC7D8;-->
        <h:panelGrid id="search" columns="2" cellpadding="0" cellspacing="0" columnClasses="searchPic, searchText"
                     style="margin-top:20px; margin-bottom:5px;padding:0;width:100%;table-layout: fixed; border:2px solid transparent;"
                >
            <h:graphicImage url="/style/images/search.PNG" width="20px" height="20px" alt="Search "/>
            <h:inputText id="searchInput"
                         autocomplete="on"
                         value="#{value}"
                         styleClass="searchText, searchPadding"
                         style="position:relative; width:100%;"
                         onblur="if(this.value==''){#{rich:element('searchLabel')}.style.zIndex = 1;  #{rich:element('search')}.style.border='2px solid transparent';}"
                         onfocus="#{rich:element('searchLabel')}.style.zIndex = 0; #{rich:element('search')}.style.border='2px solid #{a4jSkin.panelBorderColor}';">
                <a4j:support event="onkeyup" reRender="#{reRender}"
                             ignoreDupResponses="true"
                             requestDelay="700"/>
                <h:outputLabel id="searchLabel"
                               style="margin: 3px; color:gray; cursor:text; text-align:center; position: absolute; z-index:#{empty value ? 1 : 0};"
                               for="#{rich:clientId('searchInput')}" value="#{label}"/>
            </h:inputText>
        </h:panelGrid>
    </f:subview>
</ui:component>